<script setup lang="ts">
function handleClickLeft() {
  uni.navigateBack()
}
</script>

<template>
  <view class="h-full flex flex-col overflow-hidden bg-white">
    <wd-navbar
      custom-class="!bg-transparent"
      left-arrow
      title="前台码"
      left-text="返回"
      :bordered="false"
      @click-left="handleClickLeft"
    />
    <view class="top-bar h-[210px]">
      <view class="absolute bottom-4 flex flex-col px-[20px]">
        <wd-text text="前台码" size="20px" color="#fff" />
        <wd-text
          text="将前台码放置在收银台，顾客即可通过微信或者支付宝扫码结账。"
          class="mt-2"
          size="14px"
          color="#fff"
        />
      </view>
    </view>
    <view class="flex flex-col px-4 py-10">
      <wd-text text="方式一：绑定实体二维码" size="16px" color="#333">
        <template #suffix>
          <wd-tag type="primary" class="ml-2">推荐</wd-tag>
        </template>
      </wd-text>
      <wd-text
        text="如果您已有美团收银实体收款码，请在此进行扫码绑定。"
        color="#333"
        size="14px"
        class="mt-4"
      />
      <view class="mt-4">
        <wd-button size="small" type="primary" :round="false" plain>立即绑定</wd-button>
        <wd-text text="已绑定（0）" class="ml-4" size="14px" />
      </view>
      <wd-text text="方式二：下载并制作二维码" size="16px" color="#333" class="mt-10" />
      <wd-text
        text="将二维码打印成单页或者桌牌，放置在收银台收款"
        color="#333"
        size="14px"
        class="mt-4"
      />
      <view class="mt-4">
        <wd-button size="small" type="primary" :round="false" plain>下载到手机</wd-button>
        <wd-button size="small" type="primary" :round="false" plain class="ml-4">
          发送到邮箱
        </wd-button>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.top-bar {
  position: relative;
  background: url('@/static/demo.png') no-repeat;
  background-size: cover;
}
</style>
